<template>
  <div>
    <cp-nav-bar title="预下单" />
    <div style="margin-top: 100px;">
      <form action="https://up.chinanums.com/openpayapi/v2.0/cashier/JsPay" id="form" method="post">
        <input type="hidden" name="isv_no" :value='form.isv_no'><br>
        <input type="hidden" name="bank_code" :value='form.bank_code'><br>
        <input type="hidden" name="bank_mer_no" :value='form.bank_mer_no'><br>
        <input type="hidden" name="bank_shop_no" :value='form.bank_shop_no'><br>
        <!-- <input type="hidden"  name="device_no" value='2222311'><br>  -->
        <input type="hidden" name="bank_org_no" :value='form.bank_org_no'><br>
        <input type="hidden" name="key" :value='form.key'><br>
        <input type="hidden" name="mer_order_no" :value='form.mer_order_no'><br>
        <input type="hidden" name="amount" :value='form.amount'><br>
        <input type="hidden" name="nonce_str" :value='form.nonce_str'><br>
        <!-- <input type="hidden"  name="subject" value='下单'><br> -->
        <!-- <input type="hidden"  name="order_desc" value='order_desc'><br> -->
        <input type="hidden" name="notify_url" :value='form.notify_url'><br>
        <input type="hidden" name="call_back_url" :value='form.call_back_url'><br>
        <input type="hidden" name="sign_type" :value="form.sign_type"><br>
        <!-- <input type="hidden"  name="terminal_info" value='{"terminal_id":"20405614","terminal_type":"11","location":"+39.6/+115.9","terminal_ip":"111.207.36.248","address":"北京市-北京市-丰台区-丰台科技园"}'><br> -->
        <input type="hidden" name="sign" :value="form.sign"><br>
        <input type="hidden" name="subject" :value="form.subject"><br>
        <input type="hidden" name="terminal_info" :value="form.terminal_info"><br>

      </form>
      <!-- <div @click="submitForm">提交</div> -->
    </div>
  </div>
</template>
<!--lack subject and terminal_info-->
<script  setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
const route = useRoute()
import md5 from 'js-md5';
const form = ref({
  amount: route.query.amount,
  bank_code: route.query.bank_code,
  bank_mer_no: route.query.bank_mer_no,
  bank_org_no: route.query.bank_org_no,
  // bank_org_no: '000679',
  bank_shop_no: route.query.bank_shop_no,
  call_back_url: route.query.call_back_url,
  //call_back_url: "http://192.168.20.226:8082/paysuccess",
  // device_no: '2222311',
  isv_no: route.query.isv_no,
  mer_order_no: route.query.mer_order_no,
  nonce_str: route.query.nonce_str,
  notify_url: route.query.notify_url,
  //notify_url: "http://192.168.20.226:8082/pay/notify/notifyV2",
  // order_desc: 'order_desc',
  sign_type: route.query.sign_type,
  subject: route.query.subject,
  terminal_info: route.query.terminal_info,
  key: route.query.key,
  // key: 'WchBlBG5MqNFwDodM6oAYpwAhiZJkg41T2LPVY0fSYQ/91hxWLdf6w==',

  // amount: '18',
  // bank_code: '900001',
  // bank_mer_no: '20000080',
  // bank_org_no: '1',
  // bank_shop_no: 'S2310310000062',
  // call_back_url: 'http://192.168.20.54:8080',
  // isv_no: '9000255',
  // mer_order_no: '1836227697331367938',
  // nonce_str: 'j24PMHAt2WY6Hp8eiV2AGrOi4xYmzu9H',
  // notify_url: 'http://215y970n20.iask.in:7001/pay/notify/notify',
  // sign_type: 'MD5',
  // key: '111111',
})

// 后端翻的：a86d1f349578187aca2cfb4602c12877
// 自己生成的：22e52011aac892d63b70d3e5d8f4da9f

// sign
// :
// "b78aee0ef714d4a7842d7e8cb00faab8"
// sign_type
// :
// "MD5"

const placeOrder = () => {
  console.info("执行前");
  // form.value = route.query
  console.log('form::', form.value);

  let queryArr = []
  for (let key in form.value) {
    queryArr.push(key + '=' + form.value[key])
  }
  console.log('queryArr::', queryArr.join('&'));
  form.value.sign = md5(queryArr.join('&'))
  console.log('转换后的form的sign:', form.value.sign);
  console.log('第一步');
}
const submitForm = () => {
  console.log('第二步');

  document.getElementById("form").submit();
}

onMounted(async () => {
  await placeOrder()
  await submitForm()
})

// const submitForm = () => {
//   console.info("执行前");
//   var elementById = document.getElementById("form");
//   // var terminal_info = document.getElementsByName("terminal_info")[0];
//   // //      解码application/x-www-form-urlencoded字符  将%开头的16进制表示的内容解码。
//   // var terminal_info_value = decodeURI(terminal_info.value);
//   // console.info(terminal_info_value);
//   //  terminal_info.value =terminal_info_value;
//   elementById.submit();
//   console.info("执行后");
// }

</script>
